<template>
  <div class="ckEditor">
    <CKEditor.component :editor="stateObj.editor" v-model="editorData" :config="stateObj.editorConfig" :disabled="editorDisabled" @ready="onReady" @input="inputEvent" @blur="inputEvent">
    </CKEditor.component>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
//import { Alignment } from '@ckeditor/ckeditor5-alignment';
//import { Highlight } from '@ckeditor/ckeditor5-highlight';
// import { Font } from '@ckeditor/ckeditor5-font';
// import { Heading } from '@ckeditor/ckeditor5-heading';
// import { Bold, Italic, Underline } from '@ckeditor/ckeditor5-basic-styles';
// import { Essentials } from '@ckeditor/ckeditor5-essentials';
// import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
// import { Link } from '@ckeditor/ckeditor5-link';
// import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
// import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
// import { Image, ImageUpload, ImageCaption, ImageStyle, ImageToolbar, ImageResize, ImageResizeEditing, ImageResizeHandles } from '@ckeditor/ckeditor5-image';
// import { Table, TableToolbar, TableProperties, TableCellProperties, TableCaption } from '@ckeditor/ckeditor5-table';

const { proxy }: any = getCurrentInstance();
const editorData: any = ref('');
const editor = ClassicEditor;
const editorDisabled = ref(false);
const props = defineProps<{ value?: string; folderId: string }>();
const doEmit = defineEmits(['editorInput']);
let baseCkEditorRef = ref(null);

const stateObj = reactive({
  editor: ClassicEditor,
  editorData: '<p>Content of the editor.</p>',
  editorConfig: {
    language: 'zh-cn',
    height: 1000,
    // 配置工具栏
    toolbar: {
      items: [
        'alignment',
        //'Highlight',
        'fontSize',
        'fontFamily',
        'fontColor',
        'fontBackgroundColor',
        'heading',
        '|',
        'bold',
        'italic',
        'underline',
        'imageUpload',
        // '|',
        // 'subscript',
        // 'superscript',
        // 'link',
        // 'todolist',
        // 'bulletedList',
        // 'numberedList',
        '|',
        'indent',
        // 'blockQuote',
        // 'code',
        // 'codeBlock',
        'undo',
        'redo'
      ]
    },
    image: {
      toolbar: ['imageStyle:inline', '|', 'imageStyle:alignRight', 'imageStyle:alignLeft', '|', 'imageStyle:alignBlockLeft', 'imageStyle:block', 'imageStyle:alignBlockRight', '|', 'toggleImageCaption', 'imageTextAlternative', '|', 'resizeImage']
    },
    heading: {
      options: [
        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
      ]
    },
    table: {
      contentToolbar: ['tableRow', 'tableColumn', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption']
    },
    blockToolbar: {
      items: ['paragraph', 'heading1', 'heading2', 'heading3', '|', 'bulletedList', 'numberedList', '|', 'blockQuote', 'uploadImage'],
      shouldNotGroupWhenFull: true
    },
    fontFamily: {
      options: ['default', '宋体', '仿宋', '微软雅黑', '黑体', '仿宋_GB2312', '楷体', '隶书', '幼圆', 'Ubuntu, Arial, sans-serif', 'Ubuntu Mono, Courier New, Courier, monospace']
    },
    fontSize: {
      options: ['default', 8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 40, 44, 48]
    }
  }
});

onMounted(() => {
  init();
  // console.log('ckeditot 都西昂', baseCkEditorRef.value);
});

function init() {
  editorData.value = props.value;
}
function onReady(editor) {
  //监控上传图片
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    return {
      upload: () => {
        return loader.file
          .then(file => {
            return uploadFile(file);
          });
      }
    };
  };
}

/**上产图片处理 */
function uploadFile(file) {
  const data = new FormData();
  data.append('file', file);
  data.append('folderId', props.folderId);
  const url = '/api/sys/ckEditor/uploadUeditPicture';
  const a = new Promise((resolve, reject) => {
    proxy.$http
      .post(url, data)
      .then((res: any) => {
        if (res.status.code === 1) {
          resolve({
            default: (window as any).apiUrl.VITE_SERVER_URL + res.data.path
          });
        } else {
          notifyMessage(res.status.msg, notifyType.error);
        }
      })
      .catch((err) => {
        console.log(err);
      });

  });
  return a;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function inputEvent() {
  doEmit('editorInput', editorData.value);
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function setValue(value) {
  editorData.value = value;
}

defineExpose({
  setValue
});
</script>
<style lang='scss' scoped>
.ckEditor {
  :deep(.ck-editor__editable_inline) {
    // min-height: 300px;
    // max-height: 300px;
    height: 300px;
  }
}
</style>